# 什么是盒模型
每个html元素都可看作一个盒子，由外边距margin、边框border、内边距padding、内容content组成，对这些属性的设置，可以实现元素的不同展示及布局(eg.设置margin实现水平居中)。
# 盒模型分类
由于浏览器对盒模型的实现不同，形成了：标准盒模型、IE盒模型
二者区别：width和height定义不同
标准盒模型的宽高包括：content
IE盒模型的宽高包括：content、padding、border
# 如何实现不同分类
由于IE盒模型更贴合人们对于物理盒子宽高的理解，所以通常采用IE盒模型。
设置两种模型的方法：
- box-sizing: border-box; // IE盒模型
- box-sizing: content-box; // 标准盒模型
# JS如何获取盒子宽、高
方法一：
dom.style.width/height
// 缺点：仅能获取js显式设置或dom标签上设置的行内样式中的宽高，
// 无法获取内联样式(<style>标签设置的样式)、外联样式(<link>标签引入的样式)中的宽高。❗️👍
方法二：
dom.currentStyle.width/height
// 缺点：可获取各种方式综合层叠计算后的宽高，但仅支持IE浏览器。👎
方法三：
window.getComputedStyle(dom).width/height
// 可获取各种方式综合层叠计算后的宽高，兼容性很好(IE9+)。👍👍
方法四：
dom.getBoundingClientRect().width/height
// 可获取元素的宽高及相对于视口原点(浏览器网页部分的左上角)位置信息(top、left)。👍
# 什么是边距重叠
边距重叠：是指父子、相邻兄弟元素的外边距会重叠在一起，大小取较大的那个边距。